<!DOCTYPE html>
<html>
<head>
<title>Optical Setup Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #000;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="800" height="400"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');
  
  // Style settings
  ctx.lineWidth = 2;
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.font = '24px serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // --- Draw Left Panel ---
  const y_center_left = 200;

  // Light path
  ctx.beginPath();
  ctx.moveTo(40, y_center_left);
  ctx.lineTo(380, y_center_left);
  ctx.stroke();

  // Arrow for I1
  const arrow1_x = 100;
  ctx.beginPath();
  ctx.moveTo(arrow1_x, y_center_left);
  ctx.lineTo(arrow1_x - 10, y_center_left - 6);
  ctx.moveTo(arrow1_x, y_center_left);
  ctx.lineTo(arrow1_x - 10, y_center_left + 6);
  ctx.stroke();
  ctx.fillText('I', 80, y_center_left + 25);
  ctx.font = '18px serif';
  ctx.fillText('1', 88, y_center_left + 30);
  ctx.font = '24px serif';


  // Uniaxial Crystal Plate
  const crystal_x = 150;
  const crystal_w = 40;
  const crystal_h = 100;
  ctx.fillStyle = '#e0e0e0'; // Light gray fill
  ctx.beginPath();
  ctx.rect(crystal_x, y_center_left - crystal_h / 2, crystal_w, crystal_h);
  ctx.fill();
  ctx.stroke();

  // Optical Axis O-O' (dashed line)
  ctx.save();
  ctx.setLineDash([5, 3]);
  ctx.beginPath();
  ctx.moveTo(crystal_x + crystal_w / 2, y_center_left - crystal_h / 2 - 20);
  ctx.lineTo(crystal_x + crystal_w / 2, y_center_left + crystal_h / 2 + 20);
  ctx.stroke();
  ctx.restore();
  
  ctx.fillText('O', crystal_x + crystal_w / 2, y_center_left - crystal_h / 2 - 35);
  ctx.fillText("O'", crystal_x + crystal_w / 2, y_center_left + crystal_h / 2 + 35);
  
  // Linear Polarizer P
  const polarizer_x = 260;
  const polarizer_w = 10;
  const polarizer_h = 160;
  ctx.fillStyle = '#c0c0c0'; // Gray fill
  ctx.beginPath();
  ctx.rect(polarizer_x, y_center_left - polarizer_h / 2, polarizer_w, polarizer_h);
  ctx.fill();
  ctx.stroke();
  ctx.fillStyle = 'black';
  ctx.fillText('P', polarizer_x + polarizer_w / 2, y_center_left - polarizer_h / 2 - 20);
  
  // Arrow for I2
  const arrow2_x = 360;
  ctx.beginPath();
  ctx.moveTo(arrow2_x, y_center_left);
  ctx.lineTo(arrow2_x - 10, y_center_left - 6);
  ctx.moveTo(arrow2_x, y_center_left);
  ctx.lineTo(arrow2_x - 10, y_center_left + 6);
  ctx.stroke();
  ctx.fillText('I', 320, y_center_left + 25);
  ctx.font = '18px serif';
  ctx.fillText('2', 328, y_center_left + 30);
  ctx.font = '24px serif';
  
  // --- Draw Right Panel ---
  const cx = 580;
  const cy = 200;
  
  // Outer Circle (annulus)
  ctx.fillStyle = '#e0e0e0'; // light gray
  ctx.beginPath();
  ctx.arc(cx, cy, 120, 0, 2 * Math.PI);
  ctx.fill();
  ctx.stroke();

  // Inner Circle
  ctx.fillStyle = '#a9a9a9'; // dark gray
  ctx.beginPath();
  ctx.arc(cx, cy, 70, 0, 2 * Math.PI);
  ctx.fill();
  ctx.stroke();
  
  // Center dot
  ctx.fillStyle = 'black';
  ctx.beginPath();
  ctx.arc(cx, cy, 4, 0, 2 * Math.PI);
  ctx.fill();
  
  // Optical Axis O-O' (vertical dashed)
  ctx.save();
  ctx.setLineDash([5, 3]);
  ctx.beginPath();
  ctx.moveTo(cx, cy - 140);
  ctx.lineTo(cx, cy + 140);
  ctx.stroke();
  ctx.restore();
  
  // Polarizer Axis P (tilted)
  const alpha = 30 * Math.PI / 180; // 30 degrees
  const line_len = 150;
  const p1_x = cx - line_len * Math.sin(alpha);
  const p1_y = cy - line_len * Math.cos(alpha);
  const p2_x = cx + line_len * Math.sin(alpha);
  const p2_y = cy + line_len * Math.cos(alpha);
  
  ctx.beginPath();
  ctx.moveTo(p1_x, p1_y);
  ctx.lineTo(p2_x, p2_y);
  ctx.stroke();

  // Labels for P axis
  ctx.fillText('P', p1_x - 20, p1_y - 5);
  ctx.fillText('P', p2_x + 15, p2_y + 15);
  
  // Labels for O-O' axis
  ctx.fillText('O', cx + 25, cy - 100);
  ctx.fillText("O'", cx, cy + 155);
  
  // Angle Arc for alpha
  const arc_radius = 50;
  const startAngle = -Math.PI / 2 - alpha; // P line angle
  const endAngle = -Math.PI / 2;         // O line angle
  ctx.beginPath();
  ctx.arc(cx, cy, arc_radius, startAngle, endAngle);
  ctx.stroke();

  // Angle Label alpha
  ctx.fillText('α', cx - 25, cy - 100);

</script>
</body>
</html>